//后台配置/数据配置
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
// import Draggable from 'react-draggable';
import styles from './DataModel.less';
import { Button } from 'antd';
// import update from 'immutability-helper';
class DataModel extends Component {

  state = {
    activeDrags: 0,
    deltaPosition: {
      x: 25, y: 25
    },
    controlledPosition: {
      x: -400, y: 200
    },
    arr: [
      {
        name: 1,
        x: 0,
        y: 0,
        value: '我是一号',
        flag: true
      },
      {
        name: 2,
        x: 100,
        y: 100,
        value: '我是二号',
        flag: true
      },
      {
        name: 3,
        x: 200,
        y: 200,
        value: '我是三号',
        flag: true
      },
      {
        name: 4,
        x: 300,
        y: 300,
        value: '我是四号',
        flag: true
      }
    ]
  };
  //改变小盒子的位置
  handleDrag = (index, e, ui) => {
    console.log(index, e, ui)
    if(e.screenX < 240){
      return
    }
    if(e.screenY < 235){
      console.log(555)
      return
    }else{
      console.log(44445)
      this.state.arr[index].x = this.state.arr[index].x + ui.deltaX;
      this.state.arr[index].y = this.state.arr[index].y + ui.deltaY;
  
      this.setState({
        arr: this.state.arr
      });
    }

  };

  onStart = () => {
    this.setState({ activeDrags: ++this.state.activeDrags });
  };

  onStop = () => {
    this.setState({ activeDrags: --this.state.activeDrags });
  };

  // For controlled component
  adjustXPos = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const { x, y } = this.state.controlledPosition;
    this.setState({ controlledPosition: { x: x - 10, y } });
  };

  adjustYPos = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const { controlledPosition } = this.state;
    const { x, y } = controlledPosition;
    this.setState({ controlledPosition: { x, y: y - 10 } });
  };

  onControlledDrag = (e, position) => {
    const { x, y } = position;
    this.setState({ controlledPosition: { x, y } });
  };

  onControlledDragStop = (e, position) => {
    this.onControlledDrag(e, position);
    this.onStop();
  };



  onAddend = () => {
    let arr = this.state.arr
    arr.push(
      {
        name: arr.length,
        x: 10,
        y: 10,
        value: `我是${arr.length + 1}号`,
        flag: true
      }
    )

    this.setState({
      arr
    })
  }

  onDelete = (index) => {
    console.log(index)
    // this.setState(
    //   update(this.state, {
    //     arr: {
    //       $splice: [[index, 1]],//[dragIndex, 1] 删除拖动列,[hoverIndex, 0, dragRow]将拖动列添加到移动结束的位置
    //     },
    //   }),
    // );


    this.state.arr[index].flag = false
    this.setState({
      arr: this.state.arr
    })

  }


  onbox = (ev) => {

   //获取dom元素
   let oEvent=ev||event;
  
   var box =  document.getElementById("box1")
   var disX=oEvent.clientX-box.offsetLeft;
   var disY=oEvent.clientY-box.offsetTop;
   //改变鼠标样式
   box.style.cursor = 'move'
   box.onmousemove=fnMove;
   box.onmouseup=fnUp;

      // 鼠标移动
      function fnMove(ev){
        let oEvent=ev||event;
        let l = oEvent.clientX-disX;
        let t = oEvent.clientY-disY;
        console.log(l,t)
        // if(l < 210 || t < 100){
        //   return
        // }
        // 设置鼠标按下时的样式
        box.style.cursor = 'move';

        // 加入边界检测
        let Width = document.getElementById("warp").clientWidth;
        let Height = document.getElementById("warp").clientHeight;
        // let modalWidth = box.offsetWidth;
        // let modalHeight = box.offsetHeight;
       let lval =  l / Width * 100
       let tval =  t / Height * 100
       console.log(lval,tval)
        // 设置模态框的位置
        box.style.left = lval+'%';
        box.style.top = tval+'%';
        // console.log(box)
      }
         // 鼠标抬起
         function fnUp(){
          // 设置鼠标抬起恢复默认样式
          box.style.cursor = 'default';
  
          //清除事件
          box.onmousemove=null;
          box.onmouseup=null;
        }

   
  }

  onMouseMove = (ev) => {
    console.log(ev)
  }




  render() {
    // const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
    // const { deltaPosition, controlledPosition } = this.state;
    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    console.log(width,height)
    return (

      <div  className={styles.warp} id='warp'>
        {/* <Button type="primary" onClick={this.onAddend}>新增</Button> */}
        {/* {
          this.state.arr.map((item, index) => {
            return (
              <Draggable
                axis={['x','y']}
                
                // scale={100}
                // grid={[10, 10]}
                allowAnyClick={true}
                // cancel='8888'
                enableUserSelectHack={true}
                // position={{ x: item.x, y: item.y }}
                defaultPosition={{ x: item.x, y: item.y }}
                onDrag={this.handleDrag.bind(this, index)}  >
                <div className={styles.box} style={{display:item.flag?'':'none'}}>
                  <div>{item.value}</div>
                  <Button type="primary" onClick={this.onDelete.bind(this, index)}>删除</Button>
                  <div>x: {item.x}, y: {item.y}</div>
                </div>
              </Draggable>
            )
          })

        } */}
        <div  onMouseDown={this.onbox} style={{width:50,height:50,backgroundColor:'red',position:'absolute',left:'20%',top:'20%'}} id='box1'></div>


      </div>
    )
  }


}

export default connect()(DataModel)